<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, onMounted, nextTick, watch, computed } from "vue";
import * as echarts from "echarts";
import { getResultById, addComment, getCommentListById } from "@/apis";
import { useUserStore } from "@/store";

const props = defineProps({
  evaId: {
    type: String,
    default: "",
    required: false,
  },
});

interface CommentObjType {
  message: string;
  name: string;
  isExpert: boolean;
}

const inputComment = ref("");

const loading = ref(false);

const showCompFlag = ref(true);

const postListData = ref<CommentObjType[]>([]);

const userStore = useUserStore();

const tableData1 = ref([]);
const tableData2 = ref([]);

let maxSewageGeneration = ref(0);
let districtWithMaxSewage = ref("");
let maxDirectSewageDischargeVolume = ref(0);
let districtWithMaxDirectSewageDischarge = ref("");

let showLessSewageCollectionRateFlag = ref(false);
let lessSewageCollectionRateList = ref([]);
let lessSewageCollectionRateDistList = ref([]);

let showMorePipelineBreakageRateFlag = ref(false);
let morePipelineBreakageRateList = ref([]);
let morePipelineBreakageRateDistList = ref([]);

const rainFullOutList = ref([]);

let getRainFullOut = (distName, r1, r2, r3) => {
  if (r1 > 0) {
    rainFullOutList.value.push(distName);
    return "小雨、中雨、大雨均会发生溢流";
  } else {
    if (r2 > 0) {
      rainFullOutList.value.push(distName);
      return "中雨及大雨会发生溢流";
    } else {
      if (r3 > 0) {
        rainFullOutList.value.push(distName);
        return "大雨会发生溢流";
      } else {
        // rainFullOutList.value.push(distName);
        return "不会发生溢流";
      }
    }
  }
};

onMounted(() => {
  getResultById(props.evaId).then((res) => {
    console.log(res.data);
    //计算第一个表格内容
    let tableData1raw = res.data.eva_result.evaluate_result;
    tableData1.value = Object.keys(tableData1raw).map((district) => ({
      district,
      sewageGeneration: tableData1raw[district]["Sewage_Generation"].toFixed(2),
      pipedSewageVolume:
        tableData1raw[district]["Piped_Sewage_Volume"].toFixed(2),
      directSewageDischargeVolume:
        tableData1raw[district]["Direct_Sewage_Discharge_Volume"].toFixed(2),
      sewageCollectionRate: tableData1raw[district]["Sewage_Collection_Rate"],
      pipelineBreakageRate: tableData1raw[district]["Pipeline_Breakage_Rate"],
    }));
    console.log(tableData1.value);
    //计算第一段的数据
    tableData1.value.forEach((item) => {
      if (item.sewageGeneration > maxSewageGeneration.value) {
        maxSewageGeneration.value = item.sewageGeneration;
        districtWithMaxSewage.value = item.district;
      }
      if (
        item.directSewageDischargeVolume > maxDirectSewageDischargeVolume.value
      ) {
        maxDirectSewageDischargeVolume.value = item.directSewageDischargeVolume;
        districtWithMaxSewage.value = item.district;
      }
      if (item.sewageCollectionRate < 0.7) {
        showLessSewageCollectionRateFlag.value = true;
        lessSewageCollectionRateList.value.push(
          (item.sewageCollectionRate * 100).toFixed(2) + "%",
        );
        // item.sewageCollectionRate
        // console.log(item.sewageCollectionRate);
        lessSewageCollectionRateDistList.value.push(item.district);
      }
      if (item.pipelineBreakageRate > 0.3) {
        showMorePipelineBreakageRateFlag.value = true;
        morePipelineBreakageRateList.value.push(
          (item.pipelineBreakageRate * 100).toFixed(2) + "%",
        );
        morePipelineBreakageRateDistList.value.push(item.district);
      }
    });
    // 第二个表格
    tableData2.value = Object.keys(tableData1raw).map((district) => ({
      district,
      col1: getRainFullOut(
        district,
        tableData1raw[district]["r"][0],
        tableData1raw[district]["r"][1],
        tableData1raw[district]["r"][2],
      ),
      col2:
        tableData1raw[district]["r"][3] >= 0
          ? "干旱时会发生溢流"
          : "干旱时不会发生溢流",
      col3:
        tableData1raw[district]["r"][4] >= 0
          ? "暴雨时会发生溢流"
          : "暴雨时不会发生溢流",
    }));
  });
});

let sewageCollectionRateText = computed(() => {
  if (showLessSewageCollectionRateFlag.value == false) {
    return "可以看到所有区域污水收集率均大于70%，说明这些区域排水收集设施建设完善，管网覆盖率高，能基本实现对生活污水的全收集。";
  } else {
    return (
      "可以看到" +
      lessSewageCollectionRateDistList.value.join("、") +
      "的污水收集率分别为" +
      lessSewageCollectionRateList.value.join("、") +
      "，均小于70%，这反映了" +
      (lessSewageCollectionRateList.value.length > 1 ? "这些" : "这个") +
      "区域排水收集设施建设不完善，管网覆盖率低，存在较大面积的管网空白。"
    );
  }
});

let morePipelineBreakageRateText = computed(() => {
  if (showMorePipelineBreakageRateFlag.value == false) {
    return "所有区域的管网破损率都在30%以下，反映排水系统拥有较好的污水收集能力，排水管道完成对污水的收集与运输。";
  } else {
    return (
      morePipelineBreakageRateDistList.value.join("、") +
      "的管网破损率分别为" +
      morePipelineBreakageRateList.value.join("、") +
      "，均大于30%，说明" +
      (morePipelineBreakageRateList.value.length > 1 ? "这些" : "这个") +
      "区域排水管网出现结构性损伤，影响管网功能，无法完成对污水的收集和运输，造成排水系统污水收集能力不足。"
    );
  }
});

let rainFullOutText = computed(() => {
  if (rainFullOutList.value.length == 0) {
    return "所有区域在大雨的情况下，排水系统均不发生溢流。这些区域的排水系统设施完备，功能齐全，能有效防止溢流雨水污染自然水体，保障了城市的正常运行。";
  } else {
    console.log(rainFullOutList.value);
    return (
      rainFullOutList.value.join("、") +
      "在大雨的情况下，会发生溢流。证明" +
      (rainFullOutList.value.length > 1 ? "这些" : "这个") +
      "区域在遇到雨情较大时无法有效排除雨水。溢流的雨水可能带有污物和污染物进入自然水体，从而导致水质恶化，影响生态系统和饮用水源，严重还可能引起建筑损坏，城市内涝。"
    );
  }
});

let rainFullOutText3 = computed(() => {
  let allLessThan0 = true;
  let moreThan0List = [];
  tableData2.value.forEach((item) => {
    if (item.col3 == "暴雨时会发生溢流") {
      allLessThan0 = false;
      moreThan0List.push(item.district);
    }
  });
  console.log(moreThan0List);
  if (allLessThan0) {
    return "同样在暴雨的情况下，也不会发生溢流，证实了这些区域能够很好地应对极端天气。";
  } else {
    return (
      moreThan0List.join("、") + "在暴雨的情况下会出现溢流现象，需要重点防范。"
    );
  }
});

async function handleComment(evaluationID: string, inputComment: string) {
  console.log(`Evaluation ID: ${evaluationID}, Comment: ${inputComment}`);
  // 这里你可以将数据发送到服务器或执行其他操作
  await addComment(userStore.getUID, evaluationID, inputComment);
  ElMessage({
    message: "成功提交评论",
    type: "success",
  });
  await freshCommentsList();
}

const freshCommentsList = async () => {
  let commentListResponse = await getCommentListById(props.evaId);
  postListData.value = commentListResponse?.data?.post_list?.map(
    (postData: any) => {
      return {
        message: postData?.message,
        name: postData?.user_name,
        isExpert: postData?.user_state == 2,
      };
    },
  );
};

const percentageFormatter = (row, column) => {
  const value = row[column.property];
  return (value * 100).toFixed(2) + "%";
};
</script>

<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(122, 122, 122, 0.8)"
  >
    <h1 class="center-align">
      城市排水管网完整性与溢流风险评估结果报告 {{ evaId }}
    </h1>
    <div class="paragraph">1.城市排水管网完整性分析</div>
    <div class="plain-text">
      污水收集率作为一个综合性指标，能全面地反映区域污水收集和直排情况，而管网破损率则可以清晰直观地反映排水收集系统的功能性。一般来说，若污水收集率低于50%，则说明该区域污水管网的收集能力很低，迫切需要大量的检查、维修或重建工作，存在较多管网空白的区域；污水收集率在50%-70%之间，说明区域管网基本覆盖，可以对排水管网进行定点修补，减少管道错接漏接的现象；如果污水收集率达到70%及以上则说明区域排水收集系统完善，已经能够满足海绵城市建设的要求。此外，对于管网破损率来说，若管网破损率在30%以上，则代表管网结构性缺陷严重，必须尽快开展修复工作。污水管道结构性缺陷是指管道结构本体遭受损伤，影响强度、刚度和使用寿命的缺陷，包括破裂、变形、腐蚀和脱节等，并且破损率无可避免地受到技术应用水平、管理程度以及管网特征的影响。
    </div>
    <div class="plain-text">
      由表1可以看出，{{
        districtWithMaxSewage
      }}作为人口最多和面积最大的区域，每日生活污水产生量最高，可达{{
        maxSewageGeneration
      }}
      m<sup>3</sup>/d；{{
        districtWithMaxDirectSewageDischarge
      }}污水直排量最大，为{{ maxDirectSewageDischargeVolume }}
      m<sup>3</sup>/d。表明该区域有较多的污水没有被纳管收集，而直接排入附近环境中，这可能会引起一定程度的环境污染，造成附近水体黑臭和湖泊富营养化。
    </div>
    <div class="plain-text">
      另外，{{ sewageCollectionRateText }}{{ morePipelineBreakageRateText }}
    </div>
    <el-table
      :data="tableData1"
      id="table1"
      :header-cell-style="{ backgroundColor: '#143275', color: '#ffffff' }"
    >
      <el-table-column prop="district" label="区域名称" />
      <el-table-column prop="sewageGeneration" label="污水产生量" />
      <el-table-column prop="pipedSewageVolume" label="纳管污水量" />
      <el-table-column prop="directSewageDischargeVolume" label="污水直排量" />
      <el-table-column
        prop="sewageCollectionRate"
        label="污水收集率"
        :formatter="percentageFormatter"
      />
      <el-table-column
        prop="pipelineBreakageRate"
        label="管道破损率"
        :formatter="percentageFormatter"
      />
    </el-table>
    <div class="paragraph">2.城市雨水溢流风险分析</div>
    <div class="plain-text">
      溢流风险评估旨在预防和减少雨水溢流事件的发生，防止城市内涝，保障区域水环境安全。{{
        rainFullOutText
      }}此外，在全球气候变化的环境下，需要重点加强对于极端天气时防范，防止特殊天气对居民的生活和财产造成损失。在干旱的情况下，所有区域均不会发生溢流；{{
        rainFullOutText3
      }}
    </div>
    <el-table
      :data="tableData2"
      id="table2"
      :header-cell-style="{ backgroundColor: '#143275', color: '#ffffff' }"
    >
      <el-table-column prop="district" label="区域名称" />
      <el-table-column prop="col1" label="雨水溢流情况" />
      <el-table-column prop="col2" label="干旱溢流情况" />
      <el-table-column prop="col3" label="暴雨溢流情况" />
    </el-table>
    <div class="paragraph">3.对策建议</div>
    <div class="plain-text">
      在进行污水管网排查时，建议先通过水质水量信息识别重点管段，然后按照“自下而上，由末端向源头追溯”以及“雨天查雨水混入污水，晴天查污水混入雨水”的溯源路径。通过潜水检测、目视检测及简易工具检测等人工探查方法，结合管道内窥摄像检查技术（CCTV）、管道潜望镜（QV）、声呐检测等仪器设备，对市政排水管网进行内窥检测，为污水管网的修复工作提供关键技术支撑。
    </div>
    <div class="plain-text">
      在污水管道的修复时，需兼顾功能性、经济性、长效性和系统性的原则。功能性：即修复应根据污水管道受损程度，以恢复管道的正常使用功能为基本前提。经济性：充分考虑区域的建筑布置及道路情况，尽量减少破路恢复的工程量；对于同时存在多个缺陷的管道，应统筹考虑设计方案。长效性：修复后污水管道应满足设计荷载要求，修复后的管道应保证能长期使用且不易发生二次损坏。系统性：在满足需求的情况下尽量使用相同的管道，以保证材质、管径、管道厚度等参数相同，避免不同管材衔接以及匹配的所带来的影响。
    </div>
    <div class="plain-text">
      在填补城市管网空白时，需要多方位协同，以污水收集系统的全面覆盖为导向，以城中村和城乡结合部等区域为重点目标，同时兼顾城市的总体规划，以发展的角度，充分考虑城市的发展，确保污水能够得到长期有效收集处理。城市排水系统“提质增效”改造的本质，不仅在于提升污水处理厂的污染物削减效益，更重要的是体现截污和污水全收集，实现污水应收尽收。减少污水处理厂服务区域管网空白，就能提高污水处理厂进水的浓度，同时降低水体中污染物浓度，真正切实贯彻生态优先，绿色发展的理念。
    </div>

    <div>
      <div class="center-align">留言区</div>
      <br />
    </div>
    <div>
      <div>
        <div v-for="postData in postListData">
          <h4>
            {{ postData.isExpert ? "（专家）" : "" }}{{ postData.name }}：{{
              postData.message
            }}
          </h4>
        </div>
      </div>
    </div>
    <div class="footer-container">
      <el-input
        v-model="inputComment"
        placeholder="我也说几句..."
        class="input-comment"
      ></el-input>
      <el-button
        type="primary"
        @click="handleComment(props.evaId, inputComment)"
        >提交评论
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.center-align {
  text-align: center;
}

.main-text {
  font-size: 1.3em;
  line-height: 150%;
}

.plain-text {
  text-indent: 2em;
}

.footer-container {
  display: flex;
  align-items: center; /* 确保输入框和按钮垂直居中 */
}

.graph-card {
  border: solid transparent;
  background-color: rgba(255, 255, 255, 0);
}
</style>
